<template>
	<view class="page">
		<scroll-view class="scroll-view" scroll-y scroll-with-animation :scroll-top="top">
			<view style="padding: 30rpx 30rpx 240rpx;">
				<view class="message" :class="[item.userType]" v-for="(item,index) in list" :key="index">
					<image :src="item.avatar" v-if="item.userType === 'friend'" class="avatar" mode="widthFix"></image>
					<view class="content" v-if="item.messageType === 'image'">
						<image :src="item.content" mode="widthFix"></image>
					</view>
					<view class="content" v-else>
						{{ item.content }}
					</view>
					<image :src="item.avatar" v-if="item.userType === 'self'" class="avatar" mode="widthFix"></image>
				</view>
			</view>
		</scroll-view>
		<view class="tool">
			<input type="text" v-model="content" class="input" @confirm="send" />
			<!-- <image src="/static/photo.png" mode="widthFix" class="thumb" @click="chooseImage"></image> -->
		</view>
	</view>
</template>
<script>
	import {
		mapState
	} from 'vuex';
	import TencentCloudChat from '@tencentcloud/chat';
	import TIMUploadPlugin from 'tim-upload-plugin';


	export default {
		data() {
			return {
				chat: null,
				peerUserId: null, //对方ID
				userID: uni.getStorageSync("wanlshop:user").id,
				userSig: uni.getStorageSync("wanlshop:user").tencentIM.usersig,
				content: '', //输入的内容
				list: [{
						content: '对方历史回复消息',
						userType: 'friend',
						avatar: this._friendAvatar
					},
					{
						content: '历史消息',
						userType: 'self',
						avatar: this._selfAvatar
					}
				],
				top: 0
			};
		},
		computed: {
			...mapState(['user'])
		},
		onLaunch: function() {
			console.log('App Launch')
		},
		onLoad(opt) {
			this.peerUserId = opt.id
			uni.setNavigationBarTitle({
				// title: opt.name,
				title: '医护'
			})
			// 销毁旧实例并重新创建
			  const initChat = async () => {
			    if (this.chat) {
			      try {
			        await this.chat.destroy();
			        this.chat = null; // 清除引用
			      } catch (imError) {
			        console.error('销毁实例失败:', imError);
			      }
			    }
			    this.createChat();
			  };
			
			  initChat();

		},


		onShow: function() {
			// console.log('App Show')
		},
		onHide: function() {
		},
		onUnload() {
		  if (this.chat) {
		    this.chat.destroy();
		    this.chat = null;
		  }
		},
		methods: {
			createChat() {
				// 创建 SDK 实例，TencentCloudChat.create() 方法对于同一个 SDKAppID 只会返回同一份实例
				let options = {
					SDKAppID: 1600081841 // 接入时需要将0替换为您的即时通信应用的 SDKAppID
				};
				this.chat = TencentCloudChat.create(options); // SDK 实例通常用 chat 表示
				// 设置 SDK 日志输出级别，详细分级请参见 setLogLevel 接口的说明
				this.chat.setLogLevel(0); // 普通级别，日志量较多，接入时建议使用
				// chat.setLogLevel(1); // release级别，SDK 输出关键信息，生产环境时建议使用


				// 注册腾讯云即时通信 IM 上传插件，即时通信 IM SDK 发送图片、语音、视频、文件等消息需要使用上传插件，将文件上传到腾讯云对象存储
				// 小程序端使用 tim-upload-plugin，在小程序管理后台增加 uploadFile 域名配置 https://cos.ap-shanghai.myqcloud.com，增加 downloadFile 域名配置 https://cos.ap-shanghai.myqcloud.com
				this.chat.registerPlugin({
					'tim-upload-plugin': TIMUploadPlugin
				});

				// 如果您使用 uni-app 开发 app，并有推送需求，请使用 [uni-app 腾讯云推送服务（Push）](https://cloud.tencent.com/document/product/269/103522)
				// 如果您使用 react-native 开发 app，并有推送需求，请使用 [react-native 腾讯云推送服务（Push）](https://cloud.tencent.com/document/product/269/104005)
				// 监听事件。

				// 注意：请在调用 login 接口前调用此接口监听事件，避免漏掉 SDK 派发的事件。
				// 监听事件，如：
				this.chat.on(TencentCloudChat.EVENT.SDK_READY, function(event) {
					// 收到离线消息和会话列表同步完毕通知，接入侧可以调用 sendMessage 等需要鉴权的接口
					// event.name - TencentCloudChat.EVENT.SDK_READY
				});
				this.chat.on(TencentCloudChat.EVENT.MESSAGE_RECEIVED, function(event) {
					// 收到推送的单聊、群聊、群提示、群系统通知的新消息，可通过遍历 event.data 获取消息列表数据并渲染到页面
					// event.name - TencentCloudChat.EVENT.MESSAGE_RECEIVED
					// event.data - 存储 Message 对象的数组 - [Message]
					console.log('收到消息', event)
				});


				this.chat.on(TencentCloudChat.EVENT.MESSAGE_MODIFIED, function(event) {
					// 收到消息被第三方回调修改的通知，消息发送方可通过遍历 event.data 获取消息列表数据并更新页面上同 ID 消息的内容
					// event.name - TencentCloudChat.EVENT.MESSAGE_MODIFIED
					// event.data - 存储被第三方回调修改过的 Message 对象的数组 - [Message]
				});

				this.chat.on(TencentCloudChat.EVENT.MESSAGE_REVOKED, function(event) {
					// 收到消息被撤回的通知。
					// event.name - TencentCloudChat.EVENT.MESSAGE_REVOKED
					// event.data - 存储 Message 对象的数组 - [Message] - 每个 Message 对象的 isRevoked 属性值为 true
				});

				this.chat.on(TencentCloudChat.EVENT.MESSAGE_READ_BY_PEER, function(event) {
					// SDK 收到对端已读消息的通知，即已读回执。
					// event.name - TencentCloudChat.EVENT.MESSAGE_READ_BY_PEER
					// event.data - event.data - 存储 Message 对象的数组 - [Message] - 每个 Message 对象的 isPeerRead 属性值为 true
				});

				this.chat.on(TencentCloudChat.EVENT.CONVERSATION_LIST_UPDATED, function(event) {
					// 收到会话列表更新通知，可通过遍历 event.data 获取会话列表数据并渲染到页面
					// event.name - TencentCloudChat.EVENT.CONVERSATION_LIST_UPDATED
					// event.data - 存储 Conversation 对象的数组 - [Conversation]
					console.log('会话列表更新', event)
				});

				this.chat.on(TencentCloudChat.EVENT.GROUP_LIST_UPDATED, function(event) {
					// 收到群组列表更新通知，可通过遍历 event.data 获取群组列表数据并渲染到页面
					// event.name - TencentCloudChat.EVENT.GROUP_LIST_UPDATED
					// event.data - 存储 Group 对象的数组 - [Group]
				});

				this.chat.on(TencentCloudChat.EVENT.PROFILE_UPDATED, function(event) {
					// 收到自己或好友的资料变更通知
					// event.name - TencentCloudChat.EVENT.PROFILE_UPDATED
					// event.data - 存储 Profile 对象的数组 - [Profile]
					console.log('资料变更', event)
				});

				this.chat.on(TencentCloudChat.EVENT.BLACKLIST_UPDATED, function(event) {
					// 收到黑名单列表更新通知
					// event.name - TencentCloudChat.EVENT.BLACKLIST_UPDATED
					// event.data - 存储 userID 的数组 - [userID]
				});

				this.chat.on(TencentCloudChat.EVENT.SDK_NOT_READY, function(event) {
					// 收到 SDK 进入 not ready 状态通知，此时 SDK 无法正常工作
					// event.name - TencentCloudChat.EVENT.SDK_NOT_READY
					console.log('Ready')
				});

				this.chat.on(TencentCloudChat.EVENT.KICKED_OUT, function(event) {
					// 收到被踢下线通知
					// event.name - TencentCloudChat.EVENT.KICKED_OUT
					// event.data.type - 被踢下线的原因，例如 :
					//   - TencentCloudChat.TYPES.KICKED_OUT_MULT_ACCOUNT 多实例登录被踢
					//   - TencentCloudChat.TYPES.KICKED_OUT_MULT_DEVICE 多终端登录被踢
					//   - TencentCloudChat.TYPES.KICKED_OUT_USERSIG_EXPIRED 签名过期被踢
					//   - TencentCloudChat.TYPES.KICKED_OUT_REST_API(REST API kick 接口踢出。)
				});

				this.chat.on(TencentCloudChat.EVENT.NET_STATE_CHANGE, function(event) {
					// 网络状态发生改变
					// event.name - TencentCloudChat.EVENT.NET_STATE_CHANGE
					// event.data.state 当前网络状态，枚举值及说明如下：
					//   - TencentCloudChat.TYPES.NET_STATE_CONNECTED - 已接入网络
					//   - TencentCloudChat.TYPES.NET_STATE_CONNECTING - 连接中。很可能遇到网络抖动，SDK 在重试。接入侧可根据此状态提示“当前网络不稳定”或“连接中”
					//   - TencentCloudChat.TYPES.NET_STATE_DISCONNECTED - 未接入网络。接入侧可根据此状态提示“当前网络不可用”。SDK 仍会继续重试，若用户网络恢复，SDK 会自动同步消息
				});

				this.chat.on(TencentCloudChat.EVENT.FRIEND_LIST_UPDATED, function(event) {
					// 收到好友列表更新通知
					// event.name - TencentCloudChat.EVENT.FRIEND_LIST_UPDATED
					// event.data - 存储 Friend 对象的数组 - [Friend]
				});

				this.chat.on(TencentCloudChat.EVENT.FRIEND_APPLICATION_LIST_UPDATED, function(event) {
					// 收到好友申请列表更新通知
					// event.name - TencentCloudChat.EVENT.FRIEND_APPLICATION_LIST_UPDATED
					// friendApplicationList - 好友申请列表 - [FriendApplication]
					// unreadCount - 好友申请的未读数
					// const { friendApplicationList, unreadCount } = event.data;
					// 发送给我的好友申请（即别人申请加我为好友）
					// const applicationSentToMe = friendApplicationList.filter((friendApplication) => friendApplication.type === TencentCloudChat.TYPES.SNS_APPLICATION_SENT_TO_ME);
					// 我发送出去的好友申请（即我申请加别人为好友）
					// const applicationSentByMe = friendApplicationList.filter((friendApplication) => friendApplication.type === TencentCloudChat.TYPES.SNS_APPLICATION_SENT_BY_ME);
				});

				this.chat.on(TencentCloudChat.EVENT.FRIEND_GROUP_LIST_UPDATED, function(event) {
					// 收到好友分组列表更新通知
					// event.name - TencentCloudChat.EVENT.FRIEND_GROUP_LIST_UPDATED
					// event.data - 存储 FriendGroup 对象的数组 - [FriendGroup]
				});
				// 开始登录
				let promise = this.chat.login({
					userID: `${this.userID}`,
					userSig: `${this.userSig}`
				});
				promise.then(function(imResponse) {
					// console.log(imResponse.data); // 登录成功
					if (imResponse.data.repeatLogin === true) {
						// 标识账号已登录，本次登录操作为重复登录。
						// console.log(imResponse.data.errorInfo);

					}
				}).catch(function(imError) {
					console.warn('login error:', imError); // 登录失败的相关信息
				});
				// SDK 是否 ready。SDK ready 后，开发者可调用 SDK 发送消息等 API，使用 SDK 的各项功能。
				var isReady = this.chat.isReady();
				console.log(isReady)
			},
			send() {
				console.log('点击发送')

				// 发送文本消息，Web 端与小程序端相同
				// 1. 创建消息实例，接口返回的实例可以上屏
				let message = this.chat.createTextMessage({
					to: `${this.peerUserId}`,
					conversationType: TencentCloudChat.TYPES.CONV_C2C,
					// 消息优先级，用于群聊。如果某个群的消息超过了频率限制，后台会优先下发高优先级的消息，详细请参考：https://cloud.tencent.com/document/product/269/3663#.E6.B6.88.E6.81.AF.E4.BC.98.E5.85.88.E7.BA.A7.E4.B8.8E.E9.A2.91.E7.8E.87.E6.8E.A7.E5.88.B6)
					// 支持的枚举值：TencentCloudChat.TYPES.MSG_PRIORITY_HIGH, TencentCloudChat.TYPES.MSG_PRIORITY_NORMAL（默认）, TencentCloudChat.TYPES.MSG_PRIORITY_LOW, TencentCloudChat.TYPES.MSG_PRIORITY_LOWEST
					// priority: TencentCloudChat.TYPES.MSG_PRIORITY_NORMAL,
					payload: {
						text: this.content
					},
					// 支持C2C消息已读回执功能，如果您发消息需要已读回执，需购买旗舰版套餐，并且创建消息时将 needReadReceipt 设置为 true
					// needReadReceipt: true
					// 消息自定义数据（云端保存，会发送到对端，程序卸载重装后还能拉取到）
					// cloudCustomData: 'your cloud custom data'
				});
				// 2. 发送消息
				let promise = this.chat.sendMessage(message);
				promise.then(function(imResponse) {
					// 发送成功
					// console.log(imResponse);
				}).catch(function(imError) {
					// 发送失败
					console.warn('sendMessage error:', imError);
				});
			},
			chooseImage() {
				uni.chooseImage({
					// sourceType: 'album',
					success: (res) => {
						this.list.push({
							content: res.tempFilePaths[0],
							userType: 'self',
							messageType: 'image',
							avatar: this._selfAvatar
						})
						this.scrollToBottom()
						// 模拟对方回复
						setTimeout(() => {
							this.list.push({
								content: '你好呀，朋友~',
								userType: 'friend',
								avatar: this._friendAvatar
							})
							this.scrollToBottom()
						}, 1500)
					}
				})
			},
			scrollToBottom() {
				this.top = this.list.length * 1000
			}
		}
	}
</script>

<style lang="scss" scoped>
	.scroll-view {
		/* #ifdef H5 */
		height: calc(100vh - 44px);
		/* #endif */
		/* #ifndef H5 */
		height: 100vh;
		/* #endif */
		background: #eee;
		box-sizing: border-box;
	}

	.message {
		display: flex;
		align-items: flex-start;
		margin-bottom: 30rpx;

		.avatar {
			width: 80rpx;
			height: 80rpx;
			border-radius: 10rpx;
			margin-right: 30rpx;
		}

		.content {
			min-height: 80rpx;
			max-width: 60vw;
			box-sizing: border-box;
			font-size: 28rpx;
			line-height: 1.3;
			padding: 20rpx;
			border-radius: 10rpx;
			background: #fff;

			image {
				width: 200rpx;
			}
		}

		&.self {
			justify-content: flex-end;

			.avatar {
				margin: 0 0 0 30rpx;
			}

			.content {
				position: relative;

				&::after {
					position: absolute;
					content: '';
					width: 0;
					height: 0;
					border: 16rpx solid transparent;
					border-left: 16rpx solid #fff;
					right: -28rpx;
					top: 24rpx;
				}
			}
		}

		&.friend {
			.content {
				position: relative;

				&::after {
					position: absolute;
					content: '';
					width: 0;
					height: 0;
					border: 16rpx solid transparent;
					border-right: 16rpx solid #fff;
					left: -28rpx;
					top: 24rpx;
				}
			}
		}
	}

	.tool {
		position: fixed;
		width: 100%;
		min-height: 120rpx;
		left: 0;
		bottom: 0;
		background: #fff;
		display: flex;
		align-items: flex-start;
		box-sizing: border-box;
		padding: 20rpx 24rpx 20rpx 40rpx;
		padding-bottom: calc(20rpx + constant(safe-area-inset-bottom)/2) !important;
		padding-bottom: calc(20rpx + env(safe-area-inset-bottom)/2) !important;

		.input {
			background: #eee;
			border-radius: 10rpx;
			height: 70rpx;
			margin-right: 30rpx;
			flex: 1;
			padding: 0 20rpx;
			box-sizing: border-box;
			font-size: 28rpx;
		}

		.thumb {
			width: 64rpx;
		}
	}
</style>